/**
 * Created by Toma on 2016-6-14 14:37:47.
 * 买益海嘉里赢现金红包
 */


/**
 * 填写信息页
 */
function start() {
  // 点击弹出 活动规则
  var pop = $('.pop');
  $('.btn-link').tap(function () {
    pop.show();
  });
  $('.pop-mask,.close').tap(function () {
    pop.hide();
  });

  // 设置选择时间插件
  $('#datetime').mdater({
    minDate: new Date(2015, 6, 13)
  });

  // 上传图片 提交表单
  var imageload = new ImageUpload(option);
  // imageload.init();
  // 测试
  imageload.test();
}


/**
 * 提交成功页
 */
function check() {
  // 进度条状态
  var prog = $('.progress'),
      round = prog.data('round');
  prog.find('.before').css('width', round);
  prog.find('.after').html(round).css('left', round);

  // 当前页面状态
  var page = $('body').data('page');
  if (page) {
    $('.lottery').show().siblings('.check-con').hide();
  }

  // 加载更多用户
  showMoreuser('../php/user.php');
}


/**
 * 点击 查看完整中奖名单 时，加载更多的用户头像。
 * @param url
 */
function showMoreuser(url) {
  $('#showmore').click(tapAjax);
  // 请求数据
  function tapAjax(e) {
    $.ajax({
      url: url,
      type: 'get',
      data: '',
      dataType: 'json',
      beforeSend: function () {
        e.target.disabled = true;
        $('.userlist').append('<div class="loadingbox"><i class="loading"></i></div>');
      },
      success: function (data) {
        e.target.disabled = false;
        $('.loadingbox').remove();
        adduser(data);
      },
      error: function () {
        e.target.disabled = false;
        $('.loadingbox').remove();
        alert('加载超时');
      }
    });
  }

  // 将数据写入HTML
  function adduser(data) {
    var _html = '';
    $.each(data, function (i, el) {
      _html += '<a href="javascript:;" class="userhead"><span style="background-image: url(' + el + ');"></span></a>';
    });
    $('.userlist').append(_html);
  }
}


/**
 * option 上传小票默认设置
 *
 * @param test 测试上传图片的地址
 * @param url 表单提交地址
 * @param images 保存上传的图片url
 * @param deal 上传图片的张数
 * @param imgbtn 上传图片的按钮
 * @param subbtn 提交表单按钮
 * @param status 显示当前状态的DOM
 * @param ticket 操作上传张数的控件
 *
 * @function imgbeforeSend 图片正在上传时的调用方法
 * @function imgsuccess 图片上传成功时的回调函数
 * @function imgerr 图片上传成失败的回调函数
 * @returns case 数据检验 并返回上传的数据 json
 * @function formsuccess 表单提交成功后的回调函数
 *
 */
var option = {
  // 测试上传图片的地址
  test: '../php/com.php',
  // 表单提交地址
  url: '../php/user.php',

  images: [], // 保存上传的图片url
  deal: 1, // 默认上传一张图片

  imgbtn: $('#imgup'), // 上传图片的按钮
  subbtn: $('#sub'), // 提交表单按钮
  status: $('#showstatus'), // 显示当前状态
  ticket: $('#ticket'), // 上传张数

  imgbeforeSend: function (e) {
    this.status.html('<i class="loading"></i>图片上传中');
    e.target.disabled = true;
  },
  imgsuccess: function (e) {
    this.status.html('图片上传成功');
    e.target.disabled = false;
  },
  imgerr: function (e) {
    this.status.html('上传图片失败');
    e.target.disabled = false;
    e.target.innerHTML = '重新上传';
  },
  case: function () {
    var stores = $.trim($('#stores').val()),
        serial = $.trim($('#serial').val()),
        cashier = $.trim($('#cashier').val()),
        datetime = $.trim($('#datetime').val());
    if (stores && serial && cashier && datetime && this.images.length) {
      return {
        stores: stores,
        cashier: cashier,
        datetime: datetime,
        serial: serial,
        images: this.images
      };
    } else {
      this.status.html('请将数据填写完整~');
      return false;
    }
  },
  formsuccess: function (e) {
    window.location.href = 'check.html';
  }
};


/**
 * 上传图片，提交表单，模拟微信上传图片
 * @constructor
 *
 * 1.init 初始化默认方法
 * 2.test 测试开关
 * 3.event 用户操作
 * 4.ticket 用户修改上传的张数
 * 5.sub 提交表单
 * 6.wxImg 微信上传图片
 * 7.testInit 当测试状态时 添加iframe组件
 * 8.testImg 模拟微信上传
 * 9.addImage 将返回图片的地址添加到images中,并判断图片上传的张数
 *
 */
function ImageUpload(option) {
  this.option = option;

  // 多图上传时保留的上一张图片名 避免重复上传
  this.lastimg = '';
}

/**
 * 1.初始化默认调用方法。
 */
ImageUpload.prototype.init = function () {
  var that = this;
  that.event();
  that.option.imgbtn.click(function (e) {
    that.wxImg(e, that);
  });
};

/**
 * 2.测试时调用方法
 */
ImageUpload.prototype.test = function () {
  var that = this;
  that.event();
  that.testInit();
  that.option.imgbtn.click(function (e) {
    that.testImg(e, that);
  });
};

/**
 * 3.用户行为 初始化操作
 */
ImageUpload.prototype.event = function () {
  var that = this;
  // 提交按钮
  that.option.subbtn.click(function (e) {
    that.sub(e, that);
  });
  // 修改上传张数
  if (that.option.ticket) {
    that.option.ticket.on('change', function (e) {
      that.ticket(e, that);
    });
  }
};

/**
 * 4.用户修改上传的张数
 * @param e
 * @param that
 */
ImageUpload.prototype.ticket = function (e, that) {
  that.option.deal = e.target.value;
};

/**
 * 5.提交表单
 * @param e
 * @param that
 */
ImageUpload.prototype.sub = function (e, that) {
  var data = that.option.case();
  if (data) {
    $.ajax({
      url: that.option.url,
      type: 'post',
      data: data,
      beforeSend: function () {
        e.target.disabled = true;
        that.option.status.html('表单提交中');
      },
      success: function (data) {
        e.target.disabled = false;
        that.option.formsuccess(e);
      },
      error: function () {
        e.target.disabled = false;
        alert('加载超时');
      }
    });
  }
};

/**
 * 6.微信上传
 * @param e
 * @param that
 */
ImageUpload.prototype.wxImg = function (e, that) {
  // 调用微信图片接口
  wx.chooseImage({
    count: 9, // imgCount
    sizeType: ['compressed'],
    sourceType: ['camera'],
    success: function (res) {
      that.option.imgbeforeSend(e);
      wxUpload(res.localId.toString());
    }
  });
  // 上传图片
  function wxUpload(id) {
    wx.uploadImage({
      localId: id, // 需要上传的图片的本地ID，由chooseImage接口获得
      isShowProgressTips: 1, // 默认为1，显示进度提示
      success: function (res) {
        var serverId = res.serverId; // 返回图片的服务器端ID
        $.getJSON("http://www.vdui.cn/bbsdw/uploadImg", {"mediaId": serverId}, function (data) {
          if (data.errcode == 0) {
            that.addImage(data.url, e, that);
          } else {
            that.option.imgerr(e);
          }
        });
      },
      fail: function (res) {
        alert(JSON.stringify(res));
        that.option.imgerr(e);
      }
    });
  }
};

/**
 * 7.模拟微信上传 初始化时添加iframe组件
 */
ImageUpload.prototype.testInit = function () {

  var tmp = document.createElement('iframe');
  tmp.id = 'tmpIframe';
  tmp.name = 'tmpIframe';
  tmp.style.display = 'none';
  document.body.appendChild(tmp);

  var form = document.createElement('form');
  form.id = 'tmpFileForm';
  form.action = this.option.test;
  form.method = "post";
  form.target = "tmpIframe";
  form.enctype = "multipart/form-data";
  form.style.display = 'none';
  document.body.appendChild(form);

  var azFile = document.createElement("input");
  azFile.name = "azFile";
  azFile.id = "azFile";
  azFile.type = "file";
  document.getElementById("tmpFileForm").appendChild(azFile);
};

/**
 * 8.模拟微信上传
 * @param e
 * @param that
 */
ImageUpload.prototype.testImg = function (e, that) {
  var file = $('#azFile'),
      fet = false; // 禁止反复触发change

  file.trigger('click');
  file.on('change', function () {
    if (file.val() != that.lastimg && file.val()) {
      $("#tmpFileForm").submit();
      that.option.imgbeforeSend(e);
      that.lastimg = file.val();
      fet = true;
    }
  });

  $('#tmpIframe').on('load', function () {
    /**
     * 获取返回的数据
     * @type {*|jQuery}
     */
    var data = $.trim($(window.frames['tmpIframe'].document.body).find('p').html());
    if (fet) data ? that.addImage(data, e, that) : that.option.imgerr(e);
  });
};

/**
 * 9.将返回图片的地址添加到images中,并判断图片上传的张数
 * @param data 图片地址
 * @param e
 * @param that
 */
ImageUpload.prototype.addImage = function (data, e, that) {
  that.option.images.push(data);
  that.option.deal--;
  // 判断上传的张数
  if (that.option.deal <= 0) {
    e.target.style.display = 'none';
    that.option.subbtn.show();
  } else {
    e.target.innerHTML = '继续上传';
    that.option.subbtn.show();
  }
  that.option.imgsuccess(e);
};